import React from 'react';
import Link from 'next/link';
import { Row, Col, Card, Button } from 'antd';
import { 
  FileZipOutlined, 
  PictureOutlined, 
  RightOutlined 
} from '@ant-design/icons';
import Layout from '../components/layout/Layout';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <Layout 
      title="在线工具平台 - 简单高效的文件和图片处理工具"
      description="提供文件压缩、图片处理等多种在线工具，无需下载软件，简单高效"
    >
      {/* 头部横幅 */}
      <div className={styles.bannerCompact}>
        <h1 className={styles.titleCompact}>简单高效的在线工具平台</h1>
        <p className={styles.subtitleCompact}>
          为您提供文件压缩、图片处理等多种实用工具，无需下载安装专业软件，轻松在线完成各种操作
        </p>
        <Button type="primary" size="large" className={styles.actionButton}>
          <Link href="/file-tools/compress" legacyBehavior>
            <a>开始使用</a>
          </Link>
        </Button>
      </div>

      {/* 功能区块 */}
      <div className={styles.sectionCompact}>
        <h2 className={styles.sectionTitleCompact}>我们的工具</h2>
        <Row gutter={[24, 24]} justify="center">
          {/* 文件工具卡片 */}
          <Col xs={24} sm={12}>
            <Link href="/file-tools" legacyBehavior>
              <a>
                <Card 
                  hoverable 
                  className={styles.featureCardCompact}
                >
                  <div className={styles.featureCardContent}>
                    <div className={styles.featureIconWrapper}>
                      <FileZipOutlined className={styles.featureIcon} />
                    </div>
                    <div className={styles.featureInfo}>
                      <h3 className={styles.featureTitle}>文件工具</h3>
                      <div className={styles.featureDescription}>
                        提供文件压缩等实用功能，快速处理您的文件，提高工作效率
                      </div>
                      <Button type="link" className={styles.moreLink}>
                        查看更多 <RightOutlined />
                      </Button>
                    </div>
                  </div>
                </Card>
              </a>
            </Link>
          </Col>
          
          {/* 图片工具卡片 */}
          <Col xs={24} sm={12}>
            <Link href="/image-tools" legacyBehavior>
              <a>
                <Card 
                  hoverable 
                  className={styles.featureCardCompact}
                >
                  <div className={styles.featureCardContent}>
                    <div className={styles.featureIconWrapper}>
                      <PictureOutlined className={styles.featureIcon} />
                    </div>
                    <div className={styles.featureInfo}>
                      <h3 className={styles.featureTitle}>图片工具</h3>
                      <div className={styles.featureDescription}>
                        提供图片压缩、裁剪、格式转换等多种图片处理功能，满足您的图片处理需求
                      </div>
                      <Button type="link" className={styles.moreLink}>
                        查看更多 <RightOutlined />
                      </Button>
                    </div>
                  </div>
                </Card>
              </a>
            </Link>
          </Col>
        </Row>
      </div>

      {/* 使用指南/教程 - 精简版 */}
      <div className={`${styles.sectionCompact} ${styles.tutorialSectionCompact}`}>
        <h2 className={styles.sectionTitleCompact}>使用指南</h2>
        <Row gutter={[16, 16]}>
          <Col xs={24} md={8}>
            <div className={styles.tutorialItemCompact}>
              <div className={styles.stepNumber}>1</div>
              <h3>选择工具</h3>
            </div>
          </Col>
          <Col xs={24} md={8}>
            <div className={styles.tutorialItemCompact}>
              <div className={styles.stepNumber}>2</div>
              <h3>上传文件</h3>
            </div>
          </Col>
          <Col xs={24} md={8}>
            <div className={styles.tutorialItemCompact}>
              <div className={styles.stepNumber}>3</div>
              <h3>下载结果</h3>
            </div>
          </Col>
        </Row>
      </div>
    </Layout>
  );
} 